<?php loadTemp("global/empty_header.php");?>
<style type="text/css">
body {
	background-color: #DADADA;
}

body>.grid {
	height: 80%;
}

.image {
	margin-top: -100px;
}

.column {
	max-width: 450px;
}
</style>
<script>
  $(document)
    .ready(function() {
    	  $("form").submit(function(e){
    		 	e.preventDefault();
    		    showWaitMessage("我们正在将你的表单提交到服务器处理。。可能需要一些时间。");
    		    $("form input").attr("readonly","true");
    		    $.ajax({
    		   		type: "POST",
    		    	dataType: "json",
    		    	url:"register.php?ajax=true&op=register",
    		    	data:$('#form').serialize(),
    		    	complete:function (e) {
    		    		try{ 
    		    			var json = eval(e.responseJSON);
        		    		if(json["state"]==0){
        		    			hideWaitMessage();
        		    			showError(json["message"]);
            		  	 	}else{
            		   	 		window.location.href="register.php?op=result";
                    		}
    		    		
    		    		}catch(err){
    		    			showError("服务器返回未知数据，请联系管理员\n"+e.responseText);
    		    			return;
    				    }

        		    	
    		    	
    		    		$("#form")[0].reset();
    		    		$("form input").removeAttr("readonly");
    		    		hideWaitMessage();
    		    	}
    		    });
    		  });
    	$(".ui.icon.message").hide();
    	$("#backmess").hide();
      $('.ui.form')
        .form({
          fields: {
    	      name: {identifier: 'name', rules: [{type: 'empty', prompt: '姓名不能为空'}]},
    	      mail: {identifier: 'mail', rules: [{type: 'email', prompt: '邮箱输入必须符合格式'}, {type: 'empty', prompt: '邮箱不能为空'}]},
    	      password: {identifier: 'password', rules: [{type: 'minLength[6]', prompt: '密码必须大于六位'}]}
          }
        })
      ;
    });


  	function showWaitMessage(mess){
		$("#waitmessage").text(mess);
		$(".ui.icon.message").show();
	}
	function hideWaitMessage(){
		$(".ui.icon.message").hide();
	}
  	function showError(mess){
		$("#backmess").text(mess);
		$("#backmess").show();
	}
  </script>

<div class="ui middle aligned center aligned grid">
	<div class="column">
		<div class="ui icon message">
			<i class="notched circle loading icon"></i>
			<div class="content">
				<div class="header" id="waitheader">请稍后</div>
				<p id="waitmessage"></p>
			</div>
		</div>
		<div class="ui error message" id="backmess"></div>
		<form class="ui form" id="form">
			<div class="ui stacked segment">
				<h2 class="ui image header">学生云系统</h2>
				<h4 class="ui horizontal divider header">
					<i class="user icon"></i> 注册
				</h4>
				<br />
				<div class="field">
					<div class="ui left icon input">
						<i class="user icon"></i> <input type="text" name="name"
							placeholder="姓名">
					</div>
				</div>
				<div class="field">
					<div class="ui left icon input">
						<i class="lock icon"></i> <input type="password" name="password"
							placeholder="密码">
					</div>

				</div>
				<div class="field">
					<div class="ui left icon input">
						<i class="mail icon"></i> <input type="text" name="email"
							placeholder="电子邮箱地址">
					</div>
				</div>

				<div class="ui fluid large submit button">注册</div>
			</div>
			<div class="ui error message"></div>
		</form>

	</div>
</div>

</body>

</html>
